<template>
    <div >
    	<select @change="vauleChange" v-model="inputValue" v-bind:disabled="disabled" v-bind:class="{disable:disable}">
	        <option v-for="item in options" v-bind:value="item.value" >
	        	<span>{{item.text}}</span>
	        </option>
	    </select>
    </div>
</template>

<script>
    module.exports = {
        name:"my-select",
        data:function(){
        	return {
        		inputValue:this.value,
        		disable:this.disabled
        	}
        },
        props:{
        	value:{
        		default: ''
        	},
        	options:{
        		
        	},
        	disabled:{
        		
        	}
        },
        methods:{
        	vauleChange:function(){
        		var vm=this;
        		vm.$emit('input',vm.inputValue)
        	}
        }
    }
</script>

<style scoped>
	.disable{
	    cursor: not-allowed;
	}
	select{
		height: 36px;
		width:200px;
		font-size:16px;
		border-radius: 4px;
		border: 1px solid #bfcbd9;
		/*appearance: none;
		-webkit-appearance: none;*/
		padding-left: 10px;
	}
	select::-ms-expand{
		display: none;
	}
	select::-webkit-inner-spin-button{
		visibility: hidden;
	}
	select:focus{
		border:1px solid #20a0ff!important;
		outline: none;
	}
	select option{
		border-radius: 4px;
		font-size:16px;
	}
</style>